<template>
    <div class="pb_a">
        <van-nav-bar class="head_nb" title="考试中心"/>

        <van-sticky :offset-top="46">
            <van-tabs v-model="type" @click="vantabs">
                <van-tab title="真题" name="1"></van-tab>
                <van-tab title="模拟" name="3"></van-tab>
                <van-tab title="章节" name="2"></van-tab>
                <van-tab title="统计" name="4"></van-tab>
            </van-tabs>
        </van-sticky>

        <div class="pt_a">
            <!--未登录-->
            <div v-if="user.userId==''">
                <!--所有科目每天一练-->
                <van-cell-group v-for="item in subjects" :title="item.subjectName" :key="item.subjectId" v-if="subjects.length > 0">
                    <div>
                        <div class="ls_t f_l">（综合知识）</div>
                        <div class="ls_t f_r">更多
                            <van-icon name="arrow" size="1rem" class="icon_mid"/>
                        </div>
                        <div class="ul_box">
                            <ul>
                                <li v-for="item in item.zhzs" :title="item.name" :key="item.id">
                                    <div style="padding:10px 16px;">
                                        <div>{{item.name}}</div>
                                        <div class="pt_10">
                                            <div class="f_l txt_cb ft_10">已考人数：<span class="txt_cn">100</span>人</div>
                                            <div class="f_r ft_10">
                                                <van-button type="info" round size="mini" @click="toPaper(item.id,'1')">测试</van-button>
                                                <van-button type="warning" round size="mini" @click="toPaper(item.id,'2')">看题</van-button>
                                            </div>
                                        </div>
                                        <div class="c_b"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div>
                        <div class="ls_t f_l">（案例分析）</div>
                        <div class="ls_t f_r">更多
                            <van-icon name="arrow" size="1rem" class="icon_mid"/>
                        </div>
                        <div class="ul_box">
                            <ul style="color:#323233;font-size:14px;">
                                <li v-for="item in item.alfx" :title="item.name" :key="item.id">
                                    <div style="padding:10px 16px;">
                                        <div>{{item.name}}</div>
                                        <div class="pt_10">
                                            <div class="f_l txt_cb ft_10">已考人数：<span class="txt_cn">100</span>人</div>
                                            <div class="f_r ft_10">
                                                <van-button type="info" round size="mini" @click="toPaper(item.id,'1')">测试</van-button>
                                                <van-button type="warning" round size="mini" @click="toPaper(item.id,'2')">看题</van-button>
                                            </div>
                                        </div>
                                        <div class="c_b"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div>
                        <div class="ls_t f_l">（论文）</div>
                        <div class="ls_t f_r">更多
                            <van-icon name="arrow" size="1rem" class="icon_mid"/>
                        </div>
                        <div class="ul_box">
                            <ul style="color:#323233;font-size:14px;">
                                <li v-for="item in item.lw" :title="item.name" :key="item.id">
                                    <div style="padding:10px 16px;">
                                        <div>{{item.name}}</div>
                                        <div class="pt_10">
                                            <div class="f_l txt_cb ft_10">已考人数：<span class="txt_cn">100</span>人</div>
                                            <div class="f_r ft_10">
                                                <van-button type="info" round size="mini" @click="toPaper(item.id,'1')">测试</van-button>
                                                <van-button type="warning" round size="mini" @click="toPaper(item.id,'2')">看题</van-button>
                                            </div>
                                        </div>
                                        <div class="c_b"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </van-cell-group>

                <van-cell-group title="暂无数据！" v-if="subjects.length == 0"></van-cell-group>
            </div>

            <!--已登录-->
            <div v-if="user.userId!=''">
                <div class="ft_14 txt_cr txt_40" style="position:absolute;right:1rem;" @click="$router.push('/subject');">
                    <span>
                        切换科目<van-icon name="arrow" size="1rem" class="icon_mid"/>
                    </span>
                </div>
                <!--已选科目每天一练-->
                <van-cell-group v-for="item in subjects" :title="item.subjectName" :key="item.subjectId" v-if="subjects.length > 0">
                    <div>
                        <div class="ls_t f_l">（综合知识）</div>
                        <div class="ls_t f_r">更多
                            <van-icon name="arrow" size="1rem" class="icon_mid"/>
                        </div>
                        <div class="ul_box">
                            <ul>
                                <li v-for="item in item.zhzs" :title="item.name" :key="item.id">
                                    <div style="padding:10px 16px;">
                                        <div>{{item.name}}</div>
                                        <div class="pt_10">
                                            <div class="f_l txt_cb ft_10">已考人数：<span class="txt_cn">100</span>人</div>
                                            <div class="f_r ft_10">
                                                <van-button type="info" round size="mini" @click="toPaper(item.id,'1')">测试</van-button>
                                                <van-button type="warning" round size="mini" @click="toPaper(item.id,'2')">看题</van-button>
                                            </div>
                                        </div>
                                        <div class="c_b"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div>
                        <div class="ls_t f_l">（案例分析）</div>
                        <div class="ls_t f_r">更多
                            <van-icon name="arrow" size="1rem" class="icon_mid"/>
                        </div>
                        <div class="ul_box">
                            <ul style="color:#323233;font-size:14px;">
                                <li v-for="item in item.alfx" :title="item.name" :key="item.id">
                                    <div style="padding:10px 16px;">
                                        <div>{{item.name}}</div>
                                        <div class="pt_10">
                                            <div class="f_l txt_cb ft_10">已考人数：<span class="txt_cn">100</span>人</div>
                                            <div class="f_r ft_10">
                                                <van-button type="info" round size="mini">测试</van-button>
                                                <van-button type="warning" round size="mini">看题</van-button>
                                            </div>
                                        </div>
                                        <div class="c_b"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div>
                        <div class="ls_t f_l">（论文）</div>
                        <div class="ls_t f_r">更多
                            <van-icon name="arrow" size="1rem" class="icon_mid"/>
                        </div>
                        <div class="ul_box">
                            <ul style="color:#323233;font-size:14px;">
                                <li v-for="item in item.lw" :title="item.name" :key="item.id">
                                    <div style="padding:10px 16px;">
                                        <div>{{item.name}}</div>
                                        <div class="pt_10">
                                            <div class="f_l txt_cb ft_10">已考人数：<span class="txt_cn">100</span>人</div>
                                            <div class="f_r ft_10">
                                                <van-button type="info" round size="mini">测试</van-button>
                                                <van-button type="warning" round size="mini">看题</van-button>
                                            </div>
                                        </div>
                                        <div class="c_b"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </van-cell-group>

                <van-cell-group title="暂无数据！" v-if="subjects.length == 0"></van-cell-group>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {NavBar, Sticky} from 'vant';
    import common from '../../common/common'
    import {mapActions, mapState} from 'vuex';
    import {getSubjectPaper} from '../../api';

    Vue.use(Sticky);
    Vue.use(NavBar);
    export default {
        name: "Center",
        data() {
            return {
                type: 1,
                subjects: [],
            };
        },
        async created() {
            //异步获取用户选择的科目
            const user = this.user;
            const subject = this.subject;
            if (user.userId != '') {
                await this.reqUserSubject();
                const subjectId = subject.subjectId || '';
                if (subjectId == '') {
                    //先去到选择科目界面
                    common.toast("fail", '您还未选择科目，请先选择再操作！', () => {
                        this.$router.push('/subject');
                    });
                }
            }

            //异步获取所有的科目
            this.getSubjectPaper();
        },
        computed: {
            ...mapState(['user', 'subject']),
        },
        methods: {
            ...mapActions(['reqUserSubject']),
            vantabs(name) {
                this.type = name;
                this.getSubjectPaper();
            },
            async getSubjectPaper() {
                const params = {'subjectId': this.subject.subjectId, 'type': this.type};
                const result = await getSubjectPaper(params);
                if (result.code === 0) {
                    console.log(result);
                    this.subjects = result.data;
                }
            },
            toPaper(id, mode) {
                //去到试卷页面
                this.$router.push({
                    name: 'Paper',
                    query: {
                        id: id,
                        mode: mode
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .ls_t {
        padding: 16px 16px 8px;
        color: #969799;
        font-size: 14px;
        line-height: 16px;
    }

    li {
        width: 100%;
        position: relative;
    }

    li:not(:last-child)::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
    }

    .ul_box {
        position: relative;
        clear: both;
    }

    .ul_box ul {
        color: #323233;
        font-size: 0.875rem;
    }

    .ul_box::after {
        border-width: 1px 0 !important;
    }

    [class*=ul_box]::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        top: -50%;
        right: -50%;
        bottom: -50%;
        left: -50%;
        border: 0 solid #ebedf0;
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }
</style>
